<template>
  <div class="date-box">
    <span  @click="showPop = true" class="font_family icon-a-zu210" v-if="text == ''"></span>
    <div class="text" v-else>
      <span  @click="showPop = true">{{ showTime(text) }}</span>
      <span @click="text = ''" class="close">x</span>
    </div>
    <van-popup position="bottom" get-container="body" v-model="showPop">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="showPop = false"
        @confirm="confirmDate"
        />
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }   
  },
  data() {
    return {
      showPop: false,
      text: this.value,
      currentDate: new Date()
    }
  },
  watch: {
    value(newVal) {
      this.text = newVal
    },
    text(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    confirmDate(date) {
      const year = date.getFullYear()
      const month = this.toTen(date.getMonth() + 1)
      const day = this.toTen(date.getDate())
      this.text = `${year}-${month}-${day}`
      this.showPop = false
    },
    toTen(value) {
      if (value < 10) {
        return '0' + value
      } else {
        return value
      }
    },
    showTime(time) {
      if (time != '') {
        const date = time.split('-')
        return `${date[1]}-${date[2]}`
      }
      console.log(time)
      return ''
    },
  },
}
</script>
<style lang="less" scoped>
.date-box {
  background: #F8F8F8;
  min-width: 36px;
  margin: 0 15px 0 10px;
  height: 36px;
  padding: 0 6px;
  box-sizing: border-box;
  text-align: center;
  line-height: 36px;
  border-radius: 5px;
  .text {
    font-size: 12px;
    color: rgba(0, 153, 102, 1);
  }
  .close{
    margin-left: 6px;
    padding: 5px;
  }
}
</style>